<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body{
            background-color: #575757;
        }
        .box{
            width: 280px;
            height: 464px;
            margin: 0 auto;
        }
        .box>div{
            position: absolute;
            top: 100px;
            text-align: center;
            /* 变换： 过渡 */
            transition: all .7s;
            /* 隐藏背面 */
            backface-visibility: hidden;
             /* 开启3D空间 否则还是2D空间 */
            transform-style: preserve-3d;
        }
        .Front{
            position: relative;
            z-index: 1;
            margin-top: 4px;
        }
        .Back{
            position: relative;
            transform: rotateY(180deg);
        }
        .box .Front h3{
            /* 隐藏背面 */
            backface-visibility: hidden;
            transform: translate3d(0, 0, 50px);
        }
        .box:hover .Front{
            transform: perspective(500px) rotateY(-180deg);

        }
        .box:hover .Back{
            transform: perspective(500px) rotateY(0deg);
        }
        .back-time{
            position: absolute;
            top: 25px;
            left: 30px;
            color: #a89d88;
        }
        .back-name{
            position: absolute;
            top: 60px;
            left: 30px;
            color: #eaa165;
        }
        .imgName{
            position: absolute;
            top: 30px;
            left: 90px;
        }
        .imgAvatar{
            position: absolute;
            top: 42px;
            left: 105px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
        }
        .frontName{
            position: absolute;
            top: 130px;
            left: 20px;
            width: 240px;
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            text-align: center;
            font-family: hanyi60sFont;
            color: #7e674e;
        }
        .frontSay{
            position: absolute;
            top: 180px;
            left: 20px;
            width: 240px;
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            text-align: center;
            font-family: hanyi60sFont;
            color: #7e674e;
        }
        .box .Back p{
            /* 隐藏背面 */
            backface-visibility: hidden;
            transform: translate3d(0, 0, 50px);
        }
        .backSay{
            position: absolute;
            top: 220px;
            left: 20px;
            width: 240px;
            height: 30px;
            line-height: 30px;
            font-size: 20px;
            text-align: center;
            font-family: hanyi60sFont;
            color: #7e674e;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="Front">
            <img src="../img/p4_r_con_bg2.webp" alt="" class="img1">
            <img src="../img/dialogAvatarBG.png" alt="" class="imgName">
            <img src="../img/彭于晏.png" alt="" class="imgAvatar">
            <h3 class="frontName">彭于晏</h3>
            <h3 class="frontSay">你好，我是彭于晏</h3>
        </div>
        <div class="Back">
            <img src="../img/dialogBackBG.webp" alt="" class="img2">
            <div class="back-time">2023-08-01</div>
            <div class="back-name">久旱甘霖</div>
            <p class="backSay">你好，我是久旱甘霖</p>
        </div>
    </div>
</body>
</html>